<template>
  <basic-dialog
    width="40%"
    :title="dialogTitle"
    :visible="visible"
    :showClose="false"
  >
    <el-form ref="formData" :model="formData" class="action_dialog_body">
      <template v-if="!isChangeCustomer">
        <div>
          <p>
            {{ actionType === '1' ? '商品上架后，商品在销售端可被搜索及展示。' : '商品将在预计下架日期自动下架，请尽量准确填写。'}}
          </p>
          <el-form-item
            label-width="120px"
            label="预计下架日期："
            prop="expectOffTime"
            :rules="[{ required: !isNeverNotOff, message: '请选择预计下架日期', trigger: 'change' }]"
          >
            <el-date-picker
              v-model="formData.expectOffTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="handleChangeTime"
            />
          </el-form-item>
          <el-form-item v-if="isShowOffRadio">
            <el-radio
              v-model="formData.neverNotOff"
              label="1"
              @change="handleChangeRadio"
            >永不下架</el-radio>
          </el-form-item>
        </div>
      </template>
      <template v-else>
        <el-form-item
          label-width="150px"
          label="请选择换绑客户："
          :rules="[{ required: true }]"
        >
          <RemoteSelect
            ref="remoteSelect"
            placeholder="请选择客户"
            :optionKeys="['customerName', 'customerCode']"
            :echoValue="formData.customerCode"
            :echoOptions="[formData.customerName, formData.customerCode]"
            :remoteSelectOptions="remoteOptionsByCustomer"
            :handleClickButton="handleChooseCustomer"
            @getSelect="getCustomerInfoByRemote"
          />
        </el-form-item>
      </template>
    </el-form>
    <el-row slot="ft" type="flex" justify="end">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="okLoading" @click="handleOk">确认</el-button>
    </el-row>
    <!-- 选择客户弹框 -->
    <SelectCustomerDialog
      :visible.sync="dialogVisible.customer"
      @getSelectResults="getCustomerInfoByDialog"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import RemoteSelect from '@/pages/commodity/components/RemoteSelect';
import SelectCustomerDialog from '../SelectCustomerDialog';
import { getOffMaxDaysService } from '@/api/commodity/temporaryPurchasingGoods/temporaryProjectGoods';
import selectCustomer from '../SelectCustomerDialog/mixins';
export default {
  mixins: [selectCustomer],
  components: {
    BasicDialog,
    RemoteSelect,
    SelectCustomerDialog
  },
  props: {
    dialogTitle: String,
    visible: Boolean,
    actionType: String, // 1 - 上架弹框；2 - 修改下架日期弹框
    okLoading: {
      type: Boolean,
      default: false
    },
    handleSubmit: {
      type: Function,
      default: () => {}
    },
    isShowOffRadio: Boolean
  },
  data () {
    return {
      formData: {
        expectOffTime: '',
        neverNotOff: -1
      },
      pickerOptions: {}
    }
  },
  computed: {
    isNeverNotOff () {
      return this.isShowOffRadio && this.formData.neverNotOff === '1';
    },
    isChangeCustomer () {
      return !['1', '2'].includes(this.actionType)
    }
  },
  watch: {
    visible (val) {
      if (!val) {
        this.formData = {};
        return false;
      }
      this.setDatePickerOptions();
      // 每次进入弹框，移除之前的校验结果
      this.removeValidateState();
    }
  },
  methods: {
    handleChangeRadio () {
      if (this.isNeverNotOff) {
        this.formData.expectOffTime = '';
        this.removeValidateState();
      }
    },
    handleChangeTime () {
      if (this.formData.expectOffTime) this.formData.neverNotOff = -1;
    },
    // 移除校验结果状态
    removeValidateState () {
      this.$nextTick(() => {
        this.$refs.formData.clearValidate();
      });
    },
    // 设置时间选择器options
    async setDatePickerOptions () {
      const res = await getOffMaxDaysService('.action_dialog_body');
      if (!res?.retData) return false;
      const maxDays = res.retData - 1;
      this.pickerOptions = {
        disabledDate: (time) => {
          const MAX_DAYS_LIMIT = maxDays * 24 * 3600 * 1000;
          const isSmaller = time.getTime() <= new Date().getTime();
          const isMoreThan = time.getTime() > new Date().getTime() + MAX_DAYS_LIMIT;
          return isSmaller || isMoreThan;
        }
      }
    },
    handleOk () {
      if (this.isChangeCustomer) { // 绑定客户必填校验
        if (!this.formData.customerCode) return this.$message.warning('客户不能为空')
        this.handleSubmit(this.formData)
      } else { // 其他类型必填校验
        this.$refs.formData.validate(valid => {
          if (valid) {
            this.handleSubmit(this.formData);
          } else {
            this.$message.warning('必填项不能为空');
          }
        })
      }
    },
    handleClose () {
      this.$emit('update:visible', false);
    }
  }
}
</script>
<style lang="less" scoped>
.action_dialog_body {
  padding-top: 20px;
  padding-bottom: 20px;
  p {
    padding-bottom: 10px;
  }
}
</style>
